<template>
  <main
    class="w-screen h-screen flex"
    :class="{ 'rounded-full': config.rounded }"
    :style="`border: ${config.borderWid}px solid ${config.borderCol}`"
  >
    <video class="object-cover h-full" :class="{ 'rounded-full': config.rounded }"></video>
  </main>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
// import useConfig from '@renderer/composables/useConfig'
// const { config } = useConfig()
import { useConfigStore } from '@renderer/store/useConfig'
const { config } = useConfigStore()

const getMeidaoFun = () => {
  const constraints = {
    audio: false,
    video: { deviceId: config.deviceId }
  } as MediaStreamConstraints
  const video = document.querySelector('video')!

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream: any) {
      video.srcObject = stream
      video.play()
    })
    .catch(function () {
      new Notification('阿哦', {
        body: '调用摄像头失败'
      })
    })
}

onMounted(() => {
  getMeidaoFun()
})
</script>

<style lang="less"></style>
